<template>
	<view>
		<!-- #ifdef MP-WEIXIN -->
		<cu-custom bgColor="bg-red" :isBack="true">		<block slot="content">商品列表</block>
		</cu-custom>
		<!-- #endif -->
		
		<!-- #ifdef APP-VUE -->
		<view class="cu-custom overflow bg-white" >
			<view class="paddint-top-xl margin-top-xl"></view>
		</view>
		<!-- #endif -->
		<view class="cu-bar bg-white search">
			<!-- #ifdef H5 -->
			<view class="action" @tap="BackPage">
				<text class="cuIcon-back"></text>
				<slot name="backText"></slot>
			</view>
			<!-- #endif -->
			<view class="search-form text-center align-center" @tap="goPage('/pages/shop/search')">
				<text class="cuIcon-search lg text-gray"></text>
				<view class="text-center w100 margin-right text-gray">{{keyword?keyword:'请输入搜索的商品'}}</view>
			</view>
		</view>
		<view class="space-between padding-tb-sm padding-lr-xs bg-white align-center">
			<view class="w100  solid-right">
				<view class="flex text-center">
					<view class="cu-item flex-sub flex justify-center align-center text-center" :class="index==TabCur?'cur text-'+theme:''"
					 v-for="(item,index) in searchOptions" :key="index" @tap="tabSelect" :data-id="index">
						{{item.title}}
						<text class="flex-direction align-center" v-if="index==4">
							<text class="cuIcon cuIcon-fold xs flex" :class="item.params.price == 'asc'?'text-'+theme:'text-gray'"></text>
							<text class="cuIcon cuIcon-unfold xs flex" :class="item.params.price == 'desc'?'text-'+theme:'text-gray'"></text>
						</text>
					</view>
				</view>
			</view>
			<!-- <view class="cuIcon cuIcon-cascades default margin-left-xs"></view> -->
		</view>

		<view>
			<view class="margin-top">
				<block v-for="(item,index) in list" :key="index">
					<goodsView :value="item" :stype="'list'" :indexvalue="'1'" :col="'1'"></goodsView>
				</block>
			</view>
			<view class="cu-load margin-center" :class="loading?'loading':'over'"></view>
		</view>
	</view>
</template>

<script>
	import goodsView from '@/components/shop/goodsView.vue'
	import {
		mapState
	} from 'vuex'
	export default {
		components: {
			goodsView,
		},
		computed: mapState(['forcedLogin', 'hasLogin', 'channelLogin']),
		data() {
			return {
				keyword: '',
				cate_id: 0,
				TabCur: 0,
				searchOptions: [{
					'title': '综合排序',
					params: {}
				}, {
					'title': '销量',
					params: {
						sales: 'desc'
					}
				}, {
					'title': '浏览量',
					params: {
						view: 'desc'
					}
				}, {
					'title': '收藏',
					params: {
						collect: 'desc'
					}
				}, {
					'title': '价格',
					params: {
						price: 'asc'
					}
				}],
				page_item_id: '',
				modalName: '',
				config: null,
				history: [],
				list: [],
				page: 1,
				hasMore: true,
				loading: false,
				focus: false,
				title: "",
				theme: this.$config.THEME(),
			};
		},
		onLoad(options) {
			if (options.keyword) this.keyword = options.keyword
			if (options.page_item_id) this.page_item_id = options.page_item_id
			if (options.cate_id) this.cate_id = options.cate_id
			if (options.title) this.title = options.title
			this.$nextTick(function() {
				uni.startPullDownRefresh({})
			})
		},
		onShow() {
			this.theme = this.$config.THEME()
		},
		methods: {
			tabSelect(e) {
				if (e.currentTarget.dataset.id == 4) {
					if (this.searchOptions[4].params.price == 'asc') {
						this.searchOptions[4].params.price = 'desc'
					} else this.searchOptions[4].params.price = 'asc'
				} else if (this.TabCur == e.currentTarget.dataset.id) {
					return
				}
				this.TabCur = e.currentTarget.dataset.id
				this.hasMore = true
				this.loading = false
				this.page = 1
				this.list = []
				if (this.page_item_id) {
					this.getPageItem()
				} else this.getList()
			},
			getPageItem() {
				if (this.hasMore) {
					this.loading = true
					this.$http
						.get('pages', {
							keyword: this.keyword,
							page: this.page,
						}, null, this.page_item_id)
						.then((response) => {
							console.log(response)
							let list = this.list
							let _list = response.data.data.data.goodslist
							if (_list.length > 0) {
								if (list.length > 0)
									list = list.concat(_list)
								else list = _list
								this.list = list
							} else {
								this.hasMore = false
							}
							this.page += 1
							this.loading = false
							uni.stopPullDownRefresh()
						})
						.catch((response) => {
							console.log(response)
							uni.stopPullDownRefresh()
						})
				}
			},
			getList() {
				if (this.hasMore && !this.loading) {
					this.loading = true
					let param = this.searchOptions[this.TabCur].params
					param.page = this.page
					if (this.type_id) param.type_id = this.type_id
					if (this.cate_id) param.cate_id = this.cate_id
					if (this.keyword) param.keyword = this.keyword
					this.$http
						.get('product_index', param)
						.then((response) => {
							let list = this.list
							if (response.data.data.length > 0) {
								if (list.length > 0)
									list = list.concat(response.data.data)
								else list = response.data.data
								this.list = list
							} else {
								this.hasMore = false
							}
							this.page += 1
							this.loading = false
							uni.stopPullDownRefresh()
						})
						.catch((response) => {
							console.log(response)
							uni.stopPullDownRefresh()
						})
				}
			},
			BackPage() {
				uni.navigateBack({
					delta: 1
				});
			}
		},
		onPullDownRefresh() {
			this.hasMore = true
			this.loading = false
			this.page = 1
			this.list = []
			if (this.page_item_id) {
				this.getPageItem()
			} else this.getList()
		},
		onReachBottom() {
			if (this.page_item_id) {
				this.getPageItem()
			} else this.getList()
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			let path = '/pages/shop/list'
			if (this.member) path += "?share_id=" + this.member.id
			return {
				title: this.$config.APP_NAME + '-商品列表',
				imageUrl: '',
				path: path
			}
		},
	}
</script>

<style>
	.list-box {
		border-radius: 5rpx;
		height: 86vh;
	}

	.item-list {
		margin: 20rpx 20rpx;
		background-color: #FFFFFF;
		overflow: hidden;
	}

	.item-list .cu-item {
		border-bottom: 1rpx solid rgba(238, 238, 238, 1);
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0rpx 20rpx;
		padding: 10px 0;
	}

	.cu-item .goods-pic {
		width: 200rpx;
		height: 200rpx;
		min-width: 200rpx;
		margin-right: 24rpx;
		flex-shrink: 0;
	}

	.goods-pic image {
		width: 100%;
		height: 100%;
	}

	.cu-item .right {
		width: 100%;
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 200rpx;
	}

	.right .title {
		height: 96rpx;
		font-size: 30rpx;
		color: rgba(26, 26, 26, 1);
		line-height: 48rpx;
		display: -webkit-box;
		word-break: break-all;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.right .price {
		font-size: 32rpx;
		color: rgba(255, 0, 0, 1);
		line-height: 48rpx;
	}

	.right .detail {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		color: rgba(166, 166, 166, 1);
		line-height: 40rpx;
	}

	.h100 {
		height: 100vh;
	}

	.iconp {
		width: 24rpx;
		height: 24rpx;
	}


	.m-title {
		font-size: 32rpx !important;
		position: relative;
		display: block;
	}

	.m-title::after {
		content: "";
		left: 0;
		position: absolute;
		width: 70rpx;
		height: 4rpx;
		bottom: 0;
		background-color: #ffb03a;
		z-index: 0;
	}

	.over {
		overflow: hidden;
	}

	.search {
		background-color: #FFFFFF;
	}

	.select-box {
		padding: 20rpx 36rpx;
		width: 750rpx;
		height: 80rpx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.select-box view {
		flex: 0 0 33.3%;
		font-size: 30rpx;
		text-align: center;
	}

	.select-box .picker-box {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.select-box .click-box {}
</style>
